<template>
  <div class="userAnalysis">
    <el-card shadow="hover">
      <el-tabs class="tab" type="border-card" v-model="activeA">
        <el-tab-pane name="1">
          <span slot="label">
            <span :class="{ activeA: activeA == 1 }">安装注册统计表</span>
          </span>
          <div v-if="activeA == 1">
            <div class="flex">
              <div>
                <h3>安装注册</h3>
              </div>
              <div>
                <el-radio-group
                  v-model="registeredType"
                  size="medium"
                  fill="#39383D"
                  @change="getInstallAndRegist"
                >
                  <el-radio-button label="1">今日</el-radio-button>
                  <el-radio-button label="2">总计</el-radio-button>
                </el-radio-group>
              </div>
            </div>

            <!-- 安装注册卡片 -->
            <div class="userStatisticsItem">
              <el-card class="one">
                <h4>
                  <span v-show="registeredType == '1'">今日</span
                  ><span v-show="registeredType == '2'">总计</span>安装数
                </h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ install }}</span>
                    <span class="numSpan" v-show="registeredType != 2">
                      <i
                        v-if="upOrDown(installRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ installRate }}
                    </span>
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time1 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>
                  <span v-show="registeredType == '1'">今日</span
                  ><span v-show="registeredType == '2'">总计</span>启动数
                </h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ start }}</span>
                    <span class="numSpan" v-show="registeredType != 2">
                      <i v-if="upOrDown(startRate)" class="el-icon-caret-top" />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ startRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time1 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>
                  <span v-show="registeredType == '1'">今日</span
                  ><span v-show="registeredType == '2'">总计</span>注册数
                </h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ regist }}</span>
                    <span class="numSpan" v-show="registeredType != 2">
                      <i
                        v-if="upOrDown(registRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ registRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time1 }}</span>
                </div>
              </el-card>
            </div>
            <!-- 安装注册统计表 -->
            <div class="searchBox">
              <div>
                <h3>安装注册统计表</h3>
              </div>
              <div>
                <div class="select">请选择渠道</div>
                <el-select v-model="channelValue">
                  <el-option
                    v-for="(item, index) in channelOptions"
                    :key="index"
                    :label="item.cn_name"
                    :value="item.en_name"
                  >
                  </el-option>
                </el-select>
                <el-date-picker
                  v-model="installTimeVal"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="installPickerOptions"
                  value-format="yyyy-MM-dd"
                  @change="installFocus"
                >
                </el-date-picker>
                <el-button class="btn" icon="el-icon-search" @click="installBtn"
                  >查询搜索</el-button
                >
                <el-button
                  class="btn"
                  icon="el-icon-download"
                  @click="exportExcelA"
                  >导出Excel</el-button
                >
              </div>
            </div>
            <div
              id="myChartA"
              :style="{ width: '100%', height: '500px' }"
            ></div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label">
            <span :class="{ activeA: activeA == 2 }">测试停留</span>
          </span>
          <div v-if="activeA == 2">
            <div class="flex">
              <div>
                <h3>测试停留</h3>
              </div>
              <div>
                <el-radio-group
                  v-model="testType"
                  size="medium"
                  fill="#39383D"
                  @change="getTestAndStay"
                >
                  <el-radio-button label="1">今日</el-radio-button>
                  <el-radio-button label="2">总计</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <!-- 测试停留卡片 -->
            <div class="userStatisticsItem">
              <el-card class="one">
                <h4>测试停留人数</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ test }}</span>
                    <span class="numSpan" v-show="testType != 2">
                      <i v-if="upOrDown(testRate)" class="el-icon-caret-top" />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ testRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time2 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>测试完成率</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ completion }}</span>
                    <span class="numSpan" v-show="testType != 2">
                      <i
                        v-if="upOrDown(completionRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ completionRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time2 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>测试停留总人数</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ totalTest }}</span>
                    <span class="numSpan" v-show="testType != 2">
                      <i
                        v-if="upOrDown(totalTestRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ totalTestRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time2 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>测试总完成率</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ totalCompletion }}</span>
                    <span class="numSpan" v-show="testType != 2">
                      <i
                        v-if="upOrDown(totalCompletionRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ totalCompletionRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time2 }}</span>
                </div>
              </el-card>
            </div>
            <!-- 测试停留人数统计表 -->
            <div class="searchBox">
              <div>
                <h3>测试停留人数统计表</h3>
              </div>
              <div>
                <div class="select">请选择渠道</div>
                <el-select v-model="testStayValue">
                  <el-option
                    v-for="(item, index) in testStayOptions"
                    :key="index"
                    :label="item.cn_name"
                    :value="item.en_name"
                  >
                  </el-option>
                </el-select>
                <el-date-picker
                  v-model="testStayTimeVal"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="testStayPickerOptions"
                  value-format="yyyy-MM-dd"
                  @change="testStayFocus"
                >
                </el-date-picker>
                <el-button
                  class="btn"
                  icon="el-icon-search"
                  @click="testStayBtn"
                  >查询搜索</el-button
                >
                <el-button
                  class="btn"
                  icon="el-icon-download"
                  @click="exportExcelB"
                  >导出Excel</el-button
                >
              </div>
            </div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期"> </el-table-column>
              <el-table-column prop="totalUserNumber" label="停留总计人数">
              </el-table-column>
              <el-table-column prop="moodNum" label="心情页停留">
              </el-table-column>
              <el-table-column prop="wantNum" label="想法页停留">
              </el-table-column>
              <el-table-column prop="infoNum" label="描述页停留">
              </el-table-column>
              <el-table-column prop="nickNum" label="昵称页停留">
              </el-table-column>
              <el-table-column prop="overNum" label="结果页停留">
              </el-table-column>
            </el-table>
            <pagination
              v-show="totalA > 0"
              :total="totalA"
              :page.sync="pageA"
              :limit.sync="pageSizeA"
              @pagination="getTestAndStayList"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane name="3">
          <span slot="label">
            <span :class="{ activeA: activeA == 3 }">在线统计</span>
          </span>
          <div v-if="activeA == 3">
            <h3>在线统计</h3>
            <!-- 在线统计卡片 -->
            <div class="userStatisticsItem">
              <el-card class="one">
                <h4>当前在线人数</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ onlineNumber }}</span>
                    <!-- <span class="numSpan">
                      <i
                        v-if="upOrDown(onlineNumberRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ onlineNumberRate }}
                      </span
                    > -->
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time3 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>今日在线人数最高峰值</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ peakOnline }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(peakOnlineRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ peakOnlineRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time3 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>今日平均在线时长</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ averageOnline }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(averageOnlineRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ averageOnlineRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time3 }}</span>
                </div>
              </el-card>
            </div>
            <div class="userStatisticsItem">
              <el-card class="one">
                <h4>近七日在线人数</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ weekOnlineNumber }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(weekOnlineNumberRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ weekOnlineNumberRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time4 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>近七日在线人数最高峰值</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ weekPeakOnline }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(weekPeakOnlineRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ weekPeakOnlineRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time4 }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>近七日平均在线时长</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ weekAverageOnline }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(weekAverageOnlineRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ weekAverageOnlineRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ time4 }}</span>
                </div>
              </el-card>
            </div>
            <!-- 渠道人均在线时长表 -->
            <div class="searchBox">
              <div>
                <h3>渠道人均在线时长表</h3>
              </div>
              <div>
                <!-- <el-select v-model="onlineValue" placeholder="请选择渠道人均">
                <el-option
                  v-for="item in onlineOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
                <el-date-picker
                  v-model="onlineTimeVal"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="onlinePickerOptions"
                  value-format="yyyy-MM-dd"
                  @change="onlineFocus"
                >
                </el-date-picker>
                <el-button class="btn" icon="el-icon-search" @click="onlineBtn"
                  >查询搜索</el-button
                >
                <el-button
                  class="btn"
                  icon="el-icon-download"
                  @click="exportExcelC"
                  >导出Excel</el-button
                >
              </div>
            </div>
            <el-table :data="onlineTableData" style="width: 100%">
              <el-table-column
                v-for="(item, index) in onlineTableHeade"
                :key="index"
                :prop="item.field"
                :label="item.name"
              >
              </el-table-column>
              <!-- <el-table-column prop="name" label="总计(人/s)"> </el-table-column>
            <el-table-column prop="address" label="总计(人/s)">
            </el-table-column>
            <el-table-column prop="address" label="渠道1(人/s)">
            </el-table-column>
            <el-table-column prop="address" label="渠道2(人/s)">
            </el-table-column> -->
            </el-table>
            <pagination
              v-show="totalB > 0"
              :total="totalB"
              :page.sync="pageB"
              :limit.sync="pageSizeB"
              @pagination="onlineList"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane name="4">
          <span slot="label">
            <span :class="{ activeA: activeA == 4 }">用户活跃</span>
          </span>
          <div v-if="activeA == 4">
            <h3>用户活跃</h3>
            <!-- 用户活跃卡片 -->
            <div class="userStatisticsItem">
              <el-card class="one">
                <h4>日活跃用户数</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ dayActive }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(dayActiveRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ dayActiveRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ dayActiveTime }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>周活跃用户数</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ weekActive }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(weekActiveRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ weekActiveRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ weekActiveTime }}</span>
                </div>
              </el-card>
              <el-card class="one">
                <h4>月活跃用户数</h4>
                <div>
                  <p class="numP">
                    <span class="numSpan">{{ monthActive }}</span>
                    <span class="numSpan">
                      <i
                        v-if="upOrDown(monthActiveRate)"
                        class="el-icon-caret-top"
                      />
                      <i v-else class="el-icon-caret-bottom" />
                      {{ monthActiveRate }}
                      <!-- <i class="el-icon-caret-top"/> --></span
                    >
                  </p>
                  <el-divider></el-divider>
                  <span>{{ monthActiveTime }}</span>
                </div>
              </el-card>
            </div>
            <!-- 安装注册统计表 -->
            <div class="searchBox">
              <!-- <div class="p">
                <p :class="{ active: index == 1 }" @click="activeStatusA()">
                  DAU
                </p>
                <p :class="{ active: index == 2 }" @click="activeStatusB()">
                  WAU
                </p>
                <p :class="{ active: index == 3 }" @click="activeStatusC()">
                  MAU
                </p>
              </div> -->
              <el-radio-group
                v-model="index"
                @change="activeBtn"
                fill="#39383D"
              >
                <el-radio-button :label="1">DAU</el-radio-button>
                <el-radio-button :label="2">WAU</el-radio-button>
                <el-radio-button :label="3">MAU</el-radio-button>
              </el-radio-group>

              <div>
                <div class="select">请选择渠道</div>
                <el-select v-model="activeValue">
                  <el-option
                    v-for="(item, index) in activeOptions"
                    :key="index"
                    :label="item.cn_name"
                    :value="item.en_name"
                  >
                  </el-option>
                </el-select>
                <el-date-picker
                  v-model="activeTimeVal"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="activePickerOptions"
                  value-format="yyyy-MM-dd"
                  @change="activeFocus"
                >
                </el-date-picker>
                <el-button class="btn" icon="el-icon-search" @click="activeBtn"
                  >查询搜索</el-button
                >
                <el-button
                  class="btn"
                  icon="el-icon-download"
                  @click="exportExcelD"
                  >导出Excel</el-button
                >
              </div>
            </div>
            <div
              id="myChartB"
              :style="{ width: '100%', height: '500px' }"
            ></div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="5">
          <span slot="label">
            <span :class="{ activeA: activeA == 5 }">用户留存</span>
          </span>
          <div v-if="activeA == 5">
            <!-- 用户留存人数与留存率 -->
            <div class="searchBox">
              <div>
                <h3>用户留存人数与留存率</h3>
              </div>
              <div>
                <div class="select">请选择渠道</div>
                <el-select v-model="retainedValue">
                  <el-option
                    v-for="(item, index) in retainedOptions"
                    :key="index"
                    :label="item.cn_name"
                    :value="item.en_name"
                  >
                  </el-option>
                </el-select>
                <el-date-picker
                  v-model="retainedTimeVal"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="retainedPickerOptions"
                  value-format="yyyy-MM-dd"
                  @change="retainedFocus"
                >
                </el-date-picker>
                <el-button
                  class="btn"
                  icon="el-icon-search"
                  @click="retainedBtn"
                  >查询搜索</el-button
                >
                <el-button
                  class="btn"
                  icon="el-icon-download"
                  @click="exportExcelE"
                  >导出Excel</el-button
                >
              </div>
            </div>
            <div class="p">
              <p :class="{ active: indexB == 1 }" @click="activeStatusD()">
                留存人数
              </p>
              <p :class="{ active: indexB == 2 }" @click="activeStatusE()">
                留存率
              </p>
            </div>
            <div>
              <el-table :data="retainedTableData" style="width: 100%">
                <el-table-column prop="date" label="日期"> </el-table-column>
                <el-table-column prop="add" v-if="indexB == 1" label="新增用户">
                </el-table-column>
                <el-table-column prop="nextDay" label="次日"> </el-table-column>
                <el-table-column prop="threeDay" label="3日"> </el-table-column>
                <el-table-column prop="fourDay" label="4日"> </el-table-column>
                <el-table-column prop="fiveDay" label="5日"> </el-table-column>
                <el-table-column prop="sixDay" label="6日"> </el-table-column>
                <el-table-column prop="sevenDay" label="7日"> </el-table-column>
                <el-table-column prop="halfMonth" label="15日">
                </el-table-column>
                <el-table-column prop="month" label="30日"> </el-table-column>
              </el-table>
              <pagination
                v-show="totalC > 0"
                :total="totalC"
                :page.sync="pageC"
                :limit.sync="pageSizeC"
                @pagination="getUserStayAndRate"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  channellist,
  InstallAndRegist,
  InstallAndRegestList,
  testAndStay,
  testAndStayList,
  onlineStatistics,
  onlinePerTime,
  userActive,
  userActiveList,
  userStayAndRate,
} from "@/api/DataAnalysis";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      activeA: "1",
      index: 1,
      indexB: 1,
      registeredType: "1",
      testType: "1",
      install: "",
      installRate: "",
      start: "",
      startRate: "",
      regist: "",
      registRate: "",
      time1: "",
      //安装注册日期
      installPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      installTimeValStartDate: "",
      installTimeValEndDate: "",
      installTimeVal: "", //安装注册时间
      channelOptions: [],
      channelValue: "", //渠道下拉框

      //测试停留
      test: "",
      testRate: "",
      completion: "",
      completionRate: "",
      totalTest: "",
      totalTestRate: "",
      totalCompletion: "",
      totalCompletionRate: "",
      time2: "",
      testStayPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      testStayTimeValStartDate: "",
      testStayTimeValEndDate: "",
      testStayTimeVal: "", //测试停留时间
      testStayOptions: [],
      testStayValue: "", //渠道下拉框
      tableData: [],
      totalA: 0,
      pageA: 1, //页码
      pageSizeA: 10, //每页条数

      //在线统计
      onlineNumber: "",
      onlineNumberRate: "",
      peakOnline: "",
      peakOnlineRate: "",
      averageOnline: "",
      averageOnlineRate: "",
      weekOnlineNumber: "",
      weekOnlineNumberRate: "",
      weekPeakOnline: "",
      weekPeakOnlineRate: "",
      weekAverageOnline: "",
      weekAverageOnlineRate: "",
      time3: "",
      time4: "",
      onlinePickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      onlineTimeValStartDate: "",
      onlineTimeValEndDate: "",
      onlineTimeVal: "", //测试停留时间
      onlineTableHeade: [], //表头
      onlineValue: "", //渠道下拉框
      onlineTableData: [],
      totalB: 0,
      pageB: 1, //页码
      pageSizeB: 10, //每页条数

      //用户活跃
      dayActive: "",
      dayActiveRate: "",
      dayActiveTime: "",
      weekActive: "",
      weekActiveRate: "",
      weekActiveTime: "",
      monthActive: "",
      monthActiveRate: "",
      monthActiveTime: "",
      //图表
      activePickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      activeTimeValStartDate: "",
      activeTimeValEndDate: "",
      activeTimeVal: "", //测试停留时间
      activeOptions: [],
      activeValue: "", //渠道下拉框

      //用户留存
      retainedPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      retainedTimeValStartDate: "",
      retainedTimeValEndDate: "",
      retainedTimeVal: "", //用户留存时间
      retainedOptions: [],
      retainedValue: "", //渠道下拉框
      retainedTableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      totalC: 0,
      pageC: 1, //页码
      pageSizeC: 10, //每页条数
      retainedRateTableData: [],
      totalD: 0,
      pageD: 1, //页码
      pageSizeD: 10, //每页条数
    };
  },
  methods: {
    //性别分析饼图
    async pin() {
      let myChartA = this.$echarts.init(document.getElementById("myChartA"));
      // myChartA.showLoading();
      const res = await InstallAndRegestList({
        channelId: this.channelValue,
        startTime: this.installTimeValStartDate,
        endTime: this.installTimeValEndDate,
      });
      // myChartA.hideLoading();
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      myChartA.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: "#6a7985",
          //   },
          // },
        },
        color: ["#1bb0e7", "#fec57f", "#79c470"],
        legend: {
          data: ["安装量", "注册量", "启动量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.time,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "安装量",
            type: "line",
            // stack: "总量",
            // res.data.installNum
            data: res.data.installNum,
          },
          {
            name: "注册量",
            type: "line",
            // stack: "总量",
            // res.data.registDate
            data: res.data.registDate,
          },
          {
            name: "启动量",
            type: "line",
            // stack: "总量",
            data: res.data.startDate,
          },
        ],
      });
    },
    async a() {
      //发送请求
      const res = await userActiveList({
        type: this.index,
        channelId: this.activeValue,
        startTime: this.activeTimeValStartDate,
        endTime: this.activeTimeValEndDate,
      });
      // 基于准备好的dom，初始化echarts实例
      let myChartB = this.$echarts.init(document.getElementById("myChartB"));

      // 绘制图表
      myChartB.setOption({
        color: ["#1bb0e7", "#fec57f", "#79c470"],
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: res.data.name,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.time,
        },
        yAxis: {
          type: "value",
        },
        series: res.data.series,
        // [
        //   {
        //     name: "渠道1",
        //     type: "line",
        //     stack: "总量",
        //     data: [120, 132, 101, 134, 90, 230, 210],
        //   },
        //   {
        //     name: "渠道2",
        //     type: "line",
        //     stack: "总量",
        //     data: [220, 182, 191, 234, 290, 330, 310],
        //   },
        //   {
        //     name: "渠道3",
        //     type: "line",
        //     stack: "总量",
        //     data: [150, 232, 201, 154, 190, 330, 410],
        //   },
        //   {
        //     name: "渠道4",
        //     type: "line",
        //     stack: "总量",
        //     data: [1150, 2232, 201, 154, 190, 330, 410],
        //   },
        // ],
      });
    },
    //安装注册查询按钮
    installBtn() {
      this.pin();
    },
    //安装注册时间
    installFocus(time) {
      if (!this.installTimeVal) {
        this.installTimeVal = [];
      }
      this.installTimeValStartDate = this.installTimeVal[0];
      this.installTimeValEndDate = this.installTimeVal[1];
    },
    //测试停留查询按钮
    testStayBtn() {
      this.pageA = 1;
      this.getTestAndStayList();
    },
    //测试停留时间
    testStayFocus(time) {
      if (!this.testStayTimeVal) {
        this.testStayTimeVal = [];
      }
      this.testStayTimeValStartDate = this.testStayTimeVal[0];
      this.testStayTimeValEndDate = this.testStayTimeVal[1];
    },
    //测试停留分页
    testStayList() {},

    //在线统计查询按钮
    onlineBtn() {
      this.pageB = 1;
      this.getOnlinePerTime();
    },
    //在线统计时间
    onlineFocus(time) {
      if (!this.onlineTimeVal) {
        this.onlineTimeVal = [];
      }
      this.onlineTimeValStartDate = this.onlineTimeVal[0];
      this.onlineTimeValEndDate = this.onlineTimeVal[1];
    },
    //在线统计分页
    onlineList(value) {
      console.log(value);
      this.pageB = value.page;
      this.pageSizeB = value.limit;
      this.getOnlinePerTime();
    },

    //用户活跃查询按钮
    activeBtn() {
      this.a();
    },
    //用户活跃时间
    activeFocus(time) {
      if (!this.activeTimeVal) {
        this.activeTimeVal = [];
      }
      this.activeTimeValStartDate = this.activeTimeVal[0];
      this.activeTimeValEndDate = this.activeTimeVal[1];
    },
    //用户活跃分页
    activeList() {},
    //DAU
    activeStatusA() {
      this.index = 1;
    },
    //WAU
    activeStatusB() {
      this.index = 2;
    },
    //MAU
    activeStatusC() {
      this.index = 3;
    },

    //用户留存查询按钮
    retainedBtn() {
      this.pageC = 1;
      this.getUserStayAndRate();
    },
    //用户留存时间
    retainedFocus(time) {
      if (!this.retainedTimeVal) {
        this.retainedTimeVal = [];
      }
      this.retainedTimeValStartDate = this.retainedTimeVal[0];
      this.retainedTimeValEndDate = this.retainedTimeVal[1];
    },
    //用户留存分页
    retainedList() {},
    //留存人数
    activeStatusD() {
      this.indexB = 1;
      this.getUserStayAndRate();
    },
    //留存率
    activeStatusE() {
      this.indexB = 2;
      this.getUserStayAndRate();
    },
    //获取安装注册总览
    getInstallAndRegist() {
      InstallAndRegist({ type: this.registeredType }).then((res) => {
        if (res.code == 0) {
          this.install = res.data.install;
          this.installRate = res.data.installRate;
          this.start = res.data.start;
          this.startRate = res.data.startRate;
          this.regist = res.data.regist;
          this.registRate = res.data.registRate;
          this.time1 = res.data.date;
        }
      });
    },
    //获取渠道
    getChannellist() {
      channellist().then((res) => {
        if (res.code == 0) {
          // res.data.unshift({ en_name: "", cn_name: "全部渠道" });
          this.channelOptions = res.data;
          this.testStayOptions = res.data;
          this.activeOptions = res.data;
          this.retainedOptions = res.data;
        }
      });
    },
    //测试停留总览
    getTestAndStay() {
      testAndStay({ type: this.testType }).then((res) => {
        if (res.code == 0) {
          this.test = res.data.test;
          this.testRate = res.data.testRate;
          this.completion = res.data.completion;
          this.completionRate = res.data.completionRate;
          this.totalTest = res.data.totalTest;
          this.totalTestRate = res.data.totalTestRate;
          this.totalCompletion = res.data.totalCompletion;
          this.totalCompletionRate = res.data.totalCompletionRate;
          this.time2 = res.data.date;
        }
      });
    },
    //测试停留统计表
    getTestAndStayList() {
      testAndStayList({
        page: this.pageA,
        pageSize: this.pageSizeA,
        channelId: this.testStayValue,
        startTime: this.testStayTimeValStartDate,
        endTime: this.testStayTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.totalA = res.data.total;
          this.tableData = res.data.list;
        }
      });
    },
    //在线统计总览
    getOnlineStatistics() {
      onlineStatistics().then((res) => {
        if (res.code == 0) {
          this.onlineNumber = res.data.onlineNumber;
          this.onlineNumberRate = res.data.onlineNumberRate;
          this.peakOnline = res.data.peakOnline;
          this.peakOnlineRate = res.data.peakOnlineRate;
          this.averageOnline = res.data.averageOnline;
          this.averageOnlineRate = res.data.averageOnlineRate;
          this.weekOnlineNumber = res.data.weekOnlineNumber;
          this.weekOnlineNumberRate = res.data.weekOnlineNumberRate;
          this.weekPeakOnline = res.data.weekPeakOnline;
          this.weekPeakOnlineRate = res.data.weekPeakOnlineRate;
          this.weekAverageOnline = res.data.weekAverageOnline;
          this.weekAverageOnlineRate = res.data.weekAverageOnlineRate;
          this.time3 = res.data.time;
          this.time4 = res.data.weekTime;
        }
      });
    },
    //渠道人均在线时长表
    getOnlinePerTime() {
      onlinePerTime({
        page: this.pageB,
        pageSize: this.pageSizeB,
        startTime: this.onlineTimeValStartDate,
        endTime: this.onlineTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.onlineTableHeade = res.data.tableHeade;
          this.onlineTableData = res.data.tableData;
          this.totalB = res.data.total;
        }
      });
    },
    //用户活跃总览
    getUserActive() {
      userActive().then((res) => {
        if (res.code == 0) {
          this.dayActive = res.data.dayActive;
          this.dayActiveRate = res.data.dayActiveRate;
          this.dayActiveTime = res.data.dayActiveTime;
          this.weekActive = res.data.weekActive;
          this.weekActiveRate = res.data.weekActiveRate;
          this.weekActiveTime = res.data.weekActiveTime;
          this.monthActive = res.data.monthActive;
          this.monthActiveRate = res.data.monthActiveRate;
          this.monthActiveTime = res.data.monthActiveTime;
        }
      });
    },
    //获取用户存留人数与存留率表
    getUserStayAndRate() {
      userStayAndRate({
        channelId: this.retainedValue,
        startTime: this.retainedTimeValStartDate,
        endTime: this.retainedTimeValEndDate,
        page: this.pageC,
        pageSize: this.pageSizeC,
        type: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          this.totalC = res.data.total;
          this.retainedTableData = res.data.list;
        }
      });
    },
    exportExcelA() {
      require.ensure([], async () => {
        const res = await InstallAndRegestList({
          channelId: this.channelValue,
          startTime: this.installTimeValStartDate,
          endTime: this.installTimeValEndDate,
        });
        const tHeader = ["日期", "安装量", "注册量", "启动量"];
        let data = [];
        res.data.time.forEach((item, index) => {
          let arr = [];
          arr.push(item); //日期
          arr.push(res.data.installNum[index]); //安装量
          arr.push(res.data.registDate[index]); //安装量
          arr.push(res.data.startDate[index]); //安装量
          data.push(arr);
        });
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        export_json_to_excel(tHeader, data, "安装注册统计");
      });
    },
    async exportExcelB() {
      if (!this.testStayTimeValStartDate || !this.testStayTimeValEndDate) {
        this.$message({
          type: "error",
          message: "请选择时间范围",
        });
        return;
      }
      const res = await testAndStayList({
        page: 1,
        pageSize: 1000,
        channelId: this.testStayValue,
        startTime: this.testStayTimeValStartDate,
        endTime: this.testStayTimeValEndDate,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "日期",
          "停留总计人数",
          "心情页停留",
          "想法页停留",
          "描述页停留",
          "昵称页停留",
          "结果页停留",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "date",
          "totalUserNumber",
          "moodNum",
          "wantNum",
          "infoNum",
          "nickNum",
          "overNum",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "测试停留人数统计"); //最后一个是表名字
      });
    },
    async exportExcelC() {
      if (!this.onlineTimeValStartDate || !this.onlineTimeValEndDate) {
        this.$message({
          type: "error",
          message: "请选择时间范围",
        });
        return;
      }
      const res = await onlinePerTime({
        page: 1,
        pageSize: 1000,
        startTime: this.onlineTimeValStartDate,
        endTime: this.onlineTimeValEndDate,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        let tHeader = [];
        let filterVal = [];
        res.data.tableHeade.forEach((item) => {
          tHeader.push(item.name);
          filterVal.push(item.field);
        });
        const list = res.data.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "渠道人均在线时长");
      });
    },
    exportExcelD() {
      require.ensure([], async () => {
        const res = await userActiveList({
          type: this.index,
          channelId: this.activeValue,
          startTime: this.activeTimeValStartDate,
          endTime: this.activeTimeValEndDate,
        });
        const tHeader = ["日期", "ios", "android"];
        let data = [];
        res.data.time.forEach((item, index) => {
          let arr = [];
          arr.push(item); //日期
          arr.push(res.data.series[1].data[index]); //ios
          arr.push(res.data.series[0].data[index]); //安卓
          data.push(arr);
        });
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        export_json_to_excel(tHeader, data, "用户活跃分析");
        // const { export_json_to_excel } = require("@/excel/Export2Excel");
        // let tHeader = [];
        // let filterVal = [];
        // this.onlineTableHeade.forEach((item) => {
        //   tHeader.push(item.name);
        //   filterVal.push(item.field);
        // });
        // const list = this.onlineTableData;
        // const data = this.formatJson(filterVal, list);
        // export_json_to_excel(tHeader, data, "渠道人均在线时长");
      });
    },
    async exportExcelE() {
      if (!this.retainedTimeValStartDate || !this.retainedTimeValEndDate) {
        this.$message({
          type: "error",
          message: "请选择时间范围",
        });
        return;
      }
      const res = await userStayAndRate({
        channelId: this.retainedValue,
        startTime: this.retainedTimeValStartDate,
        endTime: this.retainedTimeValEndDate,
        page: 1,
        pageSize: 1000,
        type: this.indexB,
      });
      // .then((res) => {
      //   if (res.code == 0) {
      //     this.totalC = res.data.total;
      //     this.retainedTableData = res.data.list;
      //   }
      // });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader1 = [
          "日期",
          "新增用户",
          "次日",
          "3日",
          "4日",
          "5日",
          "6日",
          "7日",
          "15日",
          "30日",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal1 = [
          "date",
          "add",
          "nextDay",
          "threeDay",
          "fourDay",
          "fiveDay",
          "sixDay",
          "sevenDay",
          "halfMonth",
          "month",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const tHeader2 = [
          "日期",
          "次日",
          "3日",
          "4日",
          "5日",
          "6日",
          "7日",
          "15日",
          "30日",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal2 = [
          "date",
          "nextDay",
          "threeDay",
          "fourDay",
          "fiveDay",
          "sixDay",
          "sevenDay",
          "halfMonth",
          "month",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        if (this.indexB == 1) {
          const data = this.formatJson(filterVal1, list);
          export_json_to_excel(tHeader1, data, "用户留存人数"); //最后一个是表名字
        } else {
          const data = this.formatJson(filterVal2, list);
          export_json_to_excel(tHeader2, data, "用户留存人率");
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
  watch: {
    activeA: {
      immediate: true,
      handler(val) {
        switch (val) {
          case "1":
            this.getInstallAndRegist();
            this.$nextTick(() => {
              this.pin();
            });
            break;
          case "2":
            this.getTestAndStay();
            this.getTestAndStayList();
            break;
          case "3":
            this.getOnlineStatistics();
            this.getOnlinePerTime();
            break;
          case "4":
            this.getUserActive();
            this.$nextTick(() => {
              this.a();
            });
            break;
          case "5":
            this.getUserStayAndRate();
            break;
        }
      },
    },
  },
  mounted() {
    // this.a();
    // this.pin();
  },
  created() {
    this.getChannellist();
  },
  computed: {
    upOrDown() {
      return (vlaue) => {
        if (vlaue && vlaue.substr(0, 1) == "-") {
          return false;
        } else {
          return true;
        }
      };
    },
  },
};
</script>

<style lang="less" scoped>
.userAnalysis {
  margin: 30px;
  height: 100%;
  min-height: calc(100vh - 50px);
  .card {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 90px);
    .tab {
      min-height: calc(100vh - 120px);
    }
  }
  .activeA {
    color: #ec6564;
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-select {
      margin-right: 20px;
    }
    .p {
      display: flex;
      p {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
    .active {
      background-color: #ec6564;
      color: #fff;
      border-radius: 10px;
    }
    .activeB {
      background-color: #ec6564;
      color: #fff;
      border-radius: 10px;
    }
    .activeC {
      background-color: #ec6564;
      color: #fff;
      border-radius: 10px;
    }
  }
  .userStatisticsItem {
    margin-top: 20px;
    display: flex;
    margin-bottom: 40px;
    .el-divider--horizontal {
      margin: 10px 0px;
    }
    .one {
      width: 300px;
      height: 100%;
      margin-right: 100px;
      h4 {
        margin: 0px;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .numSpan {
        font-size: 26px;
      }
      .numP {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .p {
    display: flex;
    p {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .active {
    background-color: #ec6564;
    color: #fff;
    border-radius: 10px;
  }
  .activeB {
    background-color: #ec6564;
    color: #fff;
    border-radius: 10px;
  }
  .activeC {
    background-color: #ec6564;
    color: #fff;
    border-radius: 10px;
  }
  .flex {
    display: flex;
    justify-content: space-between;
  }
  .select {
    height: 40px;
    display: inline-block;
    line-height: 40px;
    padding-right: 5px;
    // border: 1px solid #dcdfe6;
    // border-radius: 4px 0 0 4px;
  }
}
</style>